<template>
  <div id="myContainer">
    <div id="partA">
      <img src="../components/images/tower.jpg" alt="时光塔图片 "/>
      <div id="welcomeWords">
        <h1 style="margin-bottom: 0;">欢迎登录</h1>
        <p style="border-bottom: #ffffff 2px solid; padding-bottom:10px">Welcome to login</p>
      </div>
    </div>
    <div id="partB">
      <h2 style="color: #333333; margin-top: 20%; margin-bottom: 40px">教育实习管理支持平台</h2>
      <a-form
        :model="formState"
        name="myForm"
        autocomplete="off"
        @finish="submit"
        :wrapper-col="{ offset: 4, span: 16 }"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input v-model:value="formState.username" placeholder="请输入用户名" class="custom-input"/>
        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password v-model:value="formState.password" placeholder="请输入密码" class="custom-input"/>
        </a-form-item>

        <a-form-item name="enteredCaptcha" :rules="[{ required: true, message: '请输入验证码' }]">
          <div class="captcha-container">
            <a-input v-model:value="formState.enteredCaptcha" placeholder="验证码" class="custom-input"/>
            <verify-code @update:code="updateCaptcha"/>
          </div>
        </a-form-item>

        <a-form-item>
          <div class="options">
            <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
            <a style="color: #1f75fe;" @click="forget">忘记密码?</a>
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%; margin-top: 10px;">登录</a-button>

          <a-modal v-model:open="open" title="提示：" @ok="handleOk">
            <p v-if="codeFalse.valueOf">验证码错误！</p>
           
          </a-modal>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import VerifyCode from '../components/VerifyCode.vue'; // 引入验证码组件
import { useRouter } from 'vue-router';//登录之后应该跳转路由
const router = useRouter();
const open = ref(false);
const codeFalse = ref(false);

const formState = reactive({
  username: '',
  password: '',
  enteredCaptcha: '',
  remember: false,
  captcha: '',
});

const updateCaptcha = (newCaptcha) => {
  formState.captcha = newCaptcha;
};

const showModal = () => {
  open.value = true;
};

const handleOk = () => {
  open.value = false;
};
const forget=()=>{
  console.log('首次登陆，只需要填写完整信息以及验证码正确即可，请再试试！')
}

const submit = () => {
 
  if (formState.enteredCaptcha !== formState.captcha) {
    codeFalse.value = true;//验证码不匹配
    showModal();
  } else {
    //提交成功，存储用户名并在控制台输出成功信息
    let stroage=window.localStorage;
    stroage.setItem('username',formState.username)
    console.log('表单提交成功');
    router.push({name:"index"})

    
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#myContainer {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

#partA {
  flex: 2;
  overflow: hidden;
  position: relative;
}

#partB {
  text-align: center;
  flex: 1;
}

#welcomeWords {
  color: #ffffff;
  font-family: sans-serif;
  left: 60px;
  bottom: 70px;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captcha-container {
  display: flex;
  align-items: center;
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
</style>





